import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { isFunction } from 'lodash-es'

interface Config {
  /**
   * 内容
   */
  context?: string
  /**
   * 提示
   */
  title?: string
  /**
   * 确定按钮
   */
  confirmButtonText?: string
  /**
   * 取消按钮
   */
  cancelButtonText?: string
  /**
   * 图标类型
   */
  iconType?: '' | 'success' | 'warning' | 'info' | 'error'
  /**
   * 成功回调
   */
  success: Function
  /**
   * 失败回调
   */
  fail?: Function
}

export function useMessageBox(config: Config) {
  const c = Object.assign(
    {
      context: '是否确认?',
      title: '提示',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      iconType: 'warning',
    } as Config,
    config
  ) as Config

  const {
    context,
    title,
    confirmButtonText,
    cancelButtonText,
    iconType,
    success,
    fail,
  } = c

  ElMessageBox.confirm(context, title, {
    confirmButtonText,
    cancelButtonText,
    type: iconType,
  })
    .then(() => {
      if (isFunction(success)) {
        success()
      }
    })
    .catch(() => {
      if (isFunction(fail)) {
        fail()
      }
    })
}
